<template>
	<view class="page">
		<!-- #ifndef MP-WEIXIN-->
		<my-navbar leftText="购买记录"  @leftClick="back" ></my-navbar>
		<!-- #endif -->
		<view class="content">
			<view class="search_box"  @click="show = true">
				<icon type="search" size="14"/>
				<view class="search_input">{{date.start?`${date.start} — ${date.end}`:'请选择日期'}}</view>
			</view>
			<view class="total flex-btw">
				<view>种类：{{num}}</view>
				<view>合计：<text style="color:#E84B4B">￥{{total}}</text></view>
			</view>
			<view class="list_box">
				<view class="list" @click="toDetail(item.goods_id,item.goods_spu_id)" v-for="item in dataList" :key="item.goods_id">
					<image class="img" :src="item.pic" mode="aspectFit"></image>
					<view class="right">
						<view class="title">{{item.name}}</view>
						<view class="detail">
							<text class="text">数量：{{item.nums}}</text>
							<text class="text" v-show="canshowprice">小计：￥{{item.subtotal}}</text>
						</view>
					</view>
				</view>
				<view class="nodata" v-if="dataList.length==0">
					<image :src="nodataImg" mode="aspectFit"></image>
					<view>当前时间段没有购买记录~</view>
				</view>
			</view>
		</view>
		<u-calendar v-model="show" @change="changeDate" mode="range" :change-year="false" max-date="2121-12-31"></u-calendar>
	</view>
</template>

<script>
	import {$https} from '@/static/js/request.js';
	import MixinShowprice from '@/static/js/mixinshowprice.js';
	export default {
		data() {
			return {
				nodataImg:getApp().globalData.nodataImg,
				show: false,
				date:{
					start:'',
					end:'',
					startTime:'',
					endTime:'',
				},
				dataList:[],
				num:0,
				total:0,
			};
		},
		mixins:[MixinShowprice],
		onLoad(){
			let now = new Date();
			var end = (now.getTime()/1000).toFixed(0);
			now.setDate(1);
			now.setHours(0);
			now.setMinutes(0);
			now.setSeconds(0);
			var start = (now.getTime()/1000).toFixed(0);
			this.date.start = `${now.getFullYear()}-${now.getMonth()+1}-01`
			this.date.end = '至今'
			this.date.startTime = start;
			this.date.endTime = end;
			this.getData(start,end);
		},
		methods:{
			getData(start,end){
				let params = {
					start_time:start,
					end_time:end
				}
				$https('GET','purchaseRecordList',params,res=>{
					if(res.data.errcode==0){
						this.dataList = res.data.data.list;
						this.num = res.data.data.var_num;
						this.total = res.data.data.total;
					}else{
						uni.showToast({
							title: res.data.errmsg,
							icon:'none'
						});
					}
				})
			},
			changeDate(data){
				this.date.start = data.startDate;
				this.date.end = data.endDate;
				let startTime = (new Date(`${data.startDate} 00:00:01`)/1000).toFixed(0);
				let endTime = (new Date(`${data.endDate} 00:00:01`)/1000).toFixed(0);
				this.date.startTime = startTime;
				this.date.endTime = endTime;
				this.getData(startTime,endTime)
			},
			toDetail(goodsid,spuid){
				uni.navigateTo({
					url:`/pages/user/buy_history/buy_history_detail?goods_id=${goodsid}&goods_spu_id=${spuid}&start_time=${this.date.startTime}&end_time=${this.date.endTime}`
				})
			},
			back(){
				// #ifdef H5
					window.history.back(-1);
				// #endif 
				// #ifndef H5
					uni.navigateBack();
				// #endif
			},
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	.content{
		.search_box{
			box-sizing: border-box;
			padding:0 50rpx;
			background:#F0F1F3;
			border-radius: 40rpx;
			color:#B7B8BA;
			height: 80rpx;
			width:684rpx;
			margin: 20rpx auto 0;
			display: flex;
			align-items: center;
			.search_input{
				margin-left:18rpx;
				color:#999;
			}
		}
		.total{
			padding:20rpx 50rpx;
			color:#C0C0C0;
		}
		.list_box{
			padding:0 25rpx;
			.list{
				display: flex;
				align-items: center;
				background:#fff;
				box-sizing: border-box;
				padding:30rpx 20rpx;
				border-radius:10rpx;
				.img{
					width:120rpx;
					height:120rpx;
					margin-right:20rpx;
				}
				.right{
					flex:1;
					height:120rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.detail{
						color:#C0C0C0;
						.text{
							display: inline-block;
							width:50%;
						}
					}
				}
				+.list{
					margin-top:20rpx;
				}
			}
		}
	}
	/deep/.u-calendar{
		background:#fff;
		.u-calendar__header__text{
			padding-top:32rpx;
			margin-top:0;
		}
	}
}
</style>
